<template>
  <div id="app">
    <router-view />
    <div class="kf-operate-button" v-if="users.target === 'users'">
<!--      <el-popover-->
<!--        placement="left-start"-->
<!--        title="标题"-->
<!--        width="200"-->
<!--        trigger="hover"-->
<!--      >-->
<!--        <div>测试</div>-->
<!--        <img-->
<!--          slot="reference"-->
<!--          src="@/assets/btn_dianhuakefu@2x.png"-->
<!--          class="kf-operate-icon"-->
<!--          alt=""-->
<!--        >-->
<!--      </el-popover>-->
<!--      <img src="@/assets/btn_guanzhu@2x.png" class="kf-operate-icon" alt="">-->
      <el-popover
        placement="left-start"
        title=""
        width="200"
        trigger="hover"
      >
        <div style="text-align: center;">
          <img :src="qrcode" alt="">
        </div>
        <img slot="reference" src="@/assets/btn-kefu@2x.png" class="kf-operate-icon" alt="">
      </el-popover>
    </div>
  </div>
</template>

<script>
import "./utils/resetRem"
import * as service from "./service";
import eventBus from "./utils/eventBus";
import {target} from "@/utils/config";
export default {
  name: "App",
  data() {
    return {
      users: {},
      qrcode: ''
    }
  },
  mounted() {
    const token = window.localStorage.getItem('token-platform')
    if(token) {
      this.getUserInfo()
    }
  },
  methods: {
    getQrCode() {
      service.getQrcode({}).then((res) => {
        this.qrcode = res.data
      })
    },
    getUserInfo() {
      service.getUserInfo({}).then((res) => {
        window.localStorage.setItem("userInfo", JSON.stringify(res.data.users));
        eventBus.$emit("refreshNickName");
      });
    },
  },
};
</script>

<style scoped lang="scss">
  .kf-operate-button{
    position: fixed;
    bottom: 20px;
    right: 0;
    .kf-operate-icon{
      width: 59px;
      height: 59px;
      display: block;
    }
  }

  ::v-deep .el-timeline-item__content{
    line-height: 18px !important;
  }
</style>
<style>
.vendor-view__iframe{
  border: none;
  display: block;
  height: 100%;
  width: 100%;
}
.vjs-big-play-button {
  display: none!important;
}
.vjs-control-bar{
  display: none!important;
}
.el-message {
  font-size: .3rem;
  min-width: 2.5rem;
}
.el-message__content{
  font-size: .22rem;
}
.file-name-row{
  display: flex;
  align-items: center;
  cursor: pointer;
  .file-icon{
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}
.el-table .el-table__cell {
  padding: 5px 0!important;
}
/*input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {*/
/*  -webkit-appearance: none;*/
/*  margin: 0;*/
/*}*/
@import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");


@media screen and (min-width: 1000px) {
  #app {
    background: #F7F9FA;
    font-size: 14px;
    min-width: 1000px;
    overflow: auto;
  }
}
.el-pagination{
  text-align: right;
}
.v-modal{
  z-index: 1990!important;
}
.query-common-small-customer-button{
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(0deg, #E70514 0%, #EA5B64 100%);
  /*width: 62px;*/
  height: 32px;
  padding: 0 12px;
  border-radius: 18px;
  cursor: pointer;
}
.query-default-small-customer-button{
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #999999;
  /*width: 62px;*/
  padding: 0 8px;
  height: 32px;
  border-radius: 18px;
  cursor: pointer;
}
.query-deep-small-customer-button{
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EDF2F5;
  /*border: 1px solid #999999;*/
  /*width: 62px;*/
  padding: 0 14px;
  height: 32px;
  border-radius: 18px;
  cursor: pointer;
}
.el-dialog__header{
  box-shadow: 0px 1px 0px 0px #EBEBEB;
  border-radius: 15px 15px 0px 0px;
  padding: 25px;
}
.el-dialog__footer{
  box-shadow: 0px -1px 0px 0px #EBEBEB;
  border-radius: 0px 0px 15px 15px;
}
.el-dialog {
  border-radius: 15px;
}
.el-dialog__body{
  padding: 30px 80px 20px 20px;
  /*border-top: 1px solid #f1f1f1;*/
  /*border-bottom: 1px solid #f1f1f1;*/
  /*text-align: center;*/
}
.footer-bottom-flex{
  display: flex;
  justify-content: flex-end;
}
.el-pager li {
  margin-left: 10px;
  margin-right: 10px;
  line-height: 2.1111;
}
.el-pager li.active {
  color: #409EFF!important;
  border-radius: 2px;

}
.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
  color: #F56C6C!important;
  background-color: rgba(230,18,35,0.06) !important;
}
.el-textarea__inner {
  padding-bottom: 20px;
}
.el-textarea .el-input__count {
  bottom: -45px!important;
}
.el-table{
  color: #606266;
}
.el-table th.el-table__cell{
  background-color: #F2F6FC !important;
  color: #909399;
  font-weight: 400;
  height: 50px;
}
.el-table .el-table__body tr.el-table__row {
  height: 45px;
}
/* 添加隔行变色的CSS */
.el-table .el-table__body tr.el-table__row:nth-child(odd) {
  background-color: #ffffff;
}
.el-table .el-table__body tr.el-table__row:nth-child(even) {
  background-color: #F5F7FA;
}
.el-radio__input.is-checked .el-radio__inner{
  background-color: #F56C6C;
  border-color: #F56C6C;
}
.avatar-uploader-icon{
  color: #F56C6C;
}
.float-text{
  color: #F56C6C!important;
}
.el-radio__input.is-checked + .el-radio__label{
  color: #F56C6C;
}
.el-switch.is-checked .el-switch__core {
  background-color: #F56C6C!important;
  border-color: #F56C6C;
}
.el-tabs__item:hover{
  color: #F56C6C!important;
}
.add-meeting {
  color: #F56C6C!important;
  cursor: pointer;
}
.avatar-uploader .el-upload {
  border: 1px dashed #F56C6C;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload {
  width: 100%;
}
.el-upload-dragger{
  width: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #F56C6C;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-form-select {
  width: 415px;
}
.bld-select-datearr {
  width: 415px;
}
.bld-common-input {
  width: 415px;
}
.el-date-editor--datetimerange.el-input__inner {
  width: 100%;
}
.el-input__inner {
  line-height: 1px !important;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #409EFF !important;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #409EFF !important;
  border-color: #409EFF !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #409EFF !important;
  border-color: #409EFF !important;
}
.el-button--primary:hover,
.el-button--primary:focus {
  background-color: #5675f6;
}
.el-button--primary {
  border-radius: 4px;
  background: rgba(79, 138, 255, 1)!important;
  padding: 8px 12px!important;
  position: relative;
  z-index: 1001;
  color: white!important;
}
.el-button--danger:hover,
.el-button--danger:focus {
  background-color: #c9585d;
}
.el-button--danger {
  border-radius: 4px;
  background: rgba(245, 108, 108, 1)!important;
  padding: 8px 12px!important;
  position: relative;
  z-index: 1001;
}

.el-button--plan:hover,
.el-button--plan:focus {

}

.el-button--default{
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 8px 12px!important;
  position: relative;
  border-color: #DCDFE6;
  color: #000000;
}

.el-button--text {
  color: #409EFF !important;
}
.del-button{
  color: #F56C6C !important;
}

.el-tabs__item.is-active {
  color: #F56C6C !important;
}

.el-tabs__active-bar {
  background-color: #F56C6C !important;
}
.el-step{
  font-weight: 400;
}
.el-step__title.is-success{
  color: #000000;
}
.el-step__head.is-success{
  color: #409EFF;
  border-color: #409EFF;
}
.el-step__head.is-process .el-step__icon.is-text{
  background-color: #409EFF;
  border-color: #409EFF;
  color: #fff;
}
.el-step__title.is-process{
  color: #409EFF;
}

.other-button{
  background: #EDF2F5!important;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333!important;
  padding: 8px 12px!important;
}
.white-default-button{
  background: #fff!important;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  padding: 8px 12px!important;
  color: #000!important;
}
.form-body {
  padding: 15px;
  position: relative;
}
.table-bottom-page {
  position: relative;
  top: 15px;
  left: 0;
  width: 100%;
}
.common-width {
  width: 75% !important;
}
/*修改滚动条样式*/
div::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  /**/
}
div::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
div::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
  background: #333;
}
div::-webkit-scrollbar-corner {
  background: #F56C6C;
}

.select-input {
  width: 240px;
}

.set-icon-header{
  padding: 24px 24px 24px 24px;
  background: white;
  margin-bottom: 16px;
  border-radius: 15px;
}
.set-icon-button-row{
  margin-bottom: 16px;
}
.float-right{
  position: absolute;
  top: 10px;
  right: 10px;
}
.warn-text{
  position: relative;
  right: 49px;
  top: 26px;
  color: #F56C6C;
}
.tabBtns, .float-right-row {
  position: absolute;
  top: -74px!important;
  right: 0;
  /*z-index: 99;*/
  width: 100%;
  text-align: right;
  display: block;
}
.el-tabs__header{
  z-index: 100;
}
.control-fixed-pos{
  position: relative;
  top: 4px;
}
.fold-class{
  cursor: pointer;
  color: #409EFF;
}
.el-loading-mask{
  z-index: 1000!important;
}


// 全选隐藏
.DisableSelection /deep/ .cell{
  display: none!important;
  position: relative;
}
</style>
